import React, { Component } from "react";
import { Layout, Menu, Icon } from 'antd';
import { hot } from "react-hot-loader";
import SmallLogo from "./assets/small_logo.png";
import BigLogo from "./assets/logo.png"
import config from "./config.json"
// import { Link } from "react-router-dom"
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

import "./App.css";
// import Home from "./pages/home"
// import MenuItem from "antd/lib/menu/MenuItem";

const menus = [
  {
    id: "home",
    icon: "home",
    name: "首页",
    component: "/home",
    path: "home"
  },
  {
    id: "one",
    icon: "user",
    name: "第一季目录",
    children: [
      {
        id: "one-one",
        name: "第一个",
        component: "/one",
        path: "one"
      }
    ]
  }
];
const modules = {}
// required
// menus.forEach(item => {
//   if (item.path) {
//     // 以路劲为对象名 将组件存入对象
//     modules[item.path] = require(`./pages/${item.path}`).default;
//   } else {
//     item.children.forEach(ite => {
//       modules[ite.path] = require(`./pages/${ite.path}`).default;
//     })
//   }
// })
const ref = (arr) => {
  arr.forEach( item => {
     if (item.path) {
       modules[item.path] = require(`./pages/${item.path}`).default;
     }
     if(item.children){
       ref(item.children)
     }
  })
}
ref(menus)
console.log(modules)
const { Header, Sider, Content } = Layout;
const SubMenu = Menu.SubMenu;
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      collapsed: false,
      Height: config["@layout-header-height"],
      vis: true
    };
  }
  toggle() {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  render() {
    return (
      <Router>
        <Layout style={{ height: "100%" }}>
          <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
          >
            <div className="logo" style={{ height: this.state.Height }}>
              <a href="/" className="logo-box">
                <img src={this.state.collapsed ? SmallLogo : BigLogo} alt="JinTaoOO" style={{ height: "100%", width: "100%" }} />
              </a>
            </div>
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
              {menus.map(item => {
                if (item.children) {
                  return (<SubMenu key={item.id} title={<span><Icon type={item.icon} /><span>{item.name}</span></span>}>
                  {item.children.map(ite => {
                    return <Menu.Item key={ite.id}><Link href to={ite.component}>{ite.name}</Link></Menu.Item>
                  })}
                </SubMenu>)
                } else {
                  return (
                    <Menu.Item key={item.id}><Link href to={item.component}>{item.name}</Link></Menu.Item>
                  )
                }
              })}
            </Menu>
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: 0, height: this.state.Height }}>
              <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle.bind(this)}
              />
            </Header>
            <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
              {menus.map(item => {
                if (item.children) {
                  console.log(item.children)
                  return item.children.map(ite => {
                    return <Route key={ite.id} path={ite.component} component={modules[ite.path]} />
                  })
                } else {
                  return <Route key={item.id} exact path={item.component} component={modules[item.path]} />
                }
              })}
            </Content>
          </Layout>
        </Layout>
      </Router>
    );
  }
}

// ReactDOM.render(<SiderDemo />, mountNode);

export default hot(module)(App);

